<!--
 * @Description:
 * @Author: 阳婷
 * @Date: 2021-03-18 14:14:43
 * @LastEditTime: 2023-10-23 16:53:15
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox shelfBox">
        <div class="counterName">{{form.shelf_code}} <el-button class="textBtn" type="text" icon="fa fa-plus"
                @click='addLayer'> 层
            </el-button>
        </div>
        <table style="border-collapse:collapse;border:none;overflow: auto;">
            <tr v-for="(el,index) in tableData">
                <td class="cellFirst">
                    <div class="layerTitle" @click="eidtLayer(el)">{{el.shelf_code}}层</div>
                    <div style="position:absolute;bottom:10px;">
                        <el-button class="textBtn" type="text" icon="fa fa-plus-square" @click='addColumn(el)'> 列
                        </el-button>
                        <el-button class="textBtn deleteRow" v-show="tableData.length!=1&&index==0" type="text"
                            icon="fa fa-trash" @click='deleteLayer(el.id)'> 层
                        </el-button>
                        <!-- <el-button v-if="index!=(tableData.length-1)" class="textBtn" type="text"
                            icon="fa fa-arrows-alt" @click='moveTo(el.id)'> 层下移</el-button> -->
                    </div>
                </td>
                <td class="cellSecond" :class="{noPro:!val.product_id}" v-for="(val,index2) in el.columns">
                    <div class="cellList columnName" @click="showColumn(el,val)">{{val.shelf_code}}</div>
                    <div class="cellList productName" v-if="val.product_id" @click="showProduct(el,val)">
                        {{val.product_name}}</div>
                    <div class="cellList productName" v-else @click="showProduct(el,val)">请选择商品</div>
                    <el-button class="textBtn deleteCell" v-show="(index2+1)==el.columns.length" type="text"
                        icon="fa fa-trash" @click='deleteColumn(val.id)'> 列
                    </el-button>
                    <div class="cellList productInfo" v-show="val.product_id" @click="showProduct(el,val)">¥
                        {{val.price}}</div>
                    <div class="cellList productInfo" v-show="val.product_id" @click="showProduct(el,val)">
                        <span :class="{redColor:val.product_num===0}">余
                        {{val.product_num}}</span></div>
                </td>
            </tr>
        </table>
        <el-dialog v-model="showShelfs" :title="layer_title" width="400px">
            <el-form class="productBox" ref="forms" :model="shelfs" label-width="100px">
                <el-form-item label="层编号">
                    <el-input v-model="shelfs.shelf_code"></el-input>
                </el-form-item>
                 <el-form-item label="层高">
                    <el-input v-model="shelfs.shelfHeight" type="number" style="width: 100px;"></el-input> cm
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="shelfs.remark"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button type="primary" @click="saveShelf">保存</el-button>
                <!-- <el-button type="warning" v-if="shelfs.id" @click="deleteLayer">删除层</el-button> -->
            </div>
        </el-dialog>
        <el-dialog v-model="showColumns" :title="column_title" width="400px">
            <el-form class="productBox" ref="forms" :model="columns" label-width="100px">
                <el-form-item label="列编号">
                    <el-input v-model="columns.shelf_code"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="columns.remark"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button type="primary" @click="saveColumn">保存</el-button>
                <!-- <el-button type="warning" v-if="columns.id" @click="deleteColumn">删除列</el-button> -->
            </div>
        </el-dialog>
        <el-dialog v-model="showProducts" :title="product_title" width="400px">
            <el-form class="productBox" ref="forms" :model="form" label-width="100px">
                <el-form-item label="商品">
                    <el-select class="input-full" value-key="id" v-model="products.product_id" filterable
                        placeholder="商品" @change="getSelect">
                        <el-option v-for="item in productList" :key="item.id" :label="item.product_name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品价格" v-show="products.product_id">
                    {{products.price}} 元
                </el-form-item>
                <!-- <el-form-item label="商品售价" v-show="products.product_id">
                    <el-input style="width: 200px;" type="number" v-model="products.product_price"></el-input> 元
                </el-form-item> -->
                <el-form-item label="商品数量" v-show="products.product_id">
                    <el-input type="number" style="width: 200px;" v-model="products.product_num"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button type="primary" @click="saveProduct">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    export default {
        props: ["rowData"],
        data() {
            return {
                form: {
                    id: ''
                },
                showProducts: false,
                showShelfs: false,
                showColumns: false,
                tableData: [],
                productList: [],
                shelfs: {
                    id: "",
                    shelf_code: "",
                    shelfHeight:'',
                    remark: ""
                },
                columns: {
                    row_id: '',
                    id: "",
                    shelf_code: "",
                    remark: ''
                },
                products: {
                    column_id: "",
                    product_id: '',
                    product_name: '',
                    product_num: 0,
                    // product_price: 0,
                    shelf_code: ''
                },
                column_title: "列信息",
                layer_title: "层信息",
                product_title: "商品信息"
            }
        },
        watch: {
            rowData() {
                this.clearData();
                this.getProductList()
                if (!isEmptyObject(this.rowData)) {
                    this.form = deepCopy(this.rowData);
                    this.getDetail()
                }
            }
        },
        mounted() {
            this.clearData();
            this.getProductList()
            if (!isEmptyObject(this.rowData)) {
                this.form = deepCopy(this.rowData)
                this.getDetail()
            }
        },
        methods: {
            getDetail() {
                this.$ajax("get", "/api/shelfs/view/" + this.form.id, {}, data => {
                    this.tableData = data.data
                })
            },
            getProductList() {
                this.$ajax('get', '/api/products/shelfProducts', {
                    pageSize: 999
                }, (data) => {
                    this.productList = data.data.data
                })
            },
            showProduct(layer, column) {
                this.products = deepCopy(column)
                this.product_id = parseFloat(this.products.product_id)
                this.products.column_id = column.id
                this.showProducts = true
                this.product_title = layer.shelf_code + "层 " + column.shelf_code + "列"
            },
            getSelect(val) {
                var datas = this.productList.find(item => {
                    if (item.id == val) {
                        return item
                    }
                })
                this.products.product_id = datas.id
                this.products.price = datas.price
                // this.products.product_price = datas.price
                this.products.product_num = ""
            },
            addLayer() {
                this.shelfs = {
                    id: "",
                    shelf_code: "",
                    shelfHeight:deepCopy(this.form.shelfHeight),
                    remark: ""
                }
                if (this.tableData.length == 0) {
                    this.shelfs.shelf_code = "1"
                } else {

                    this.shelfs.shelf_code = this.tableData.length + 1
                }
                this.addLayerSave()
                // this.showShelfs = true
                // this.layer_title = "层信息"
            },
            eidtLayer(val) {
                this.showShelfs = true
                this.layer_title = val.shelf_code + " 层信息"
                this.shelfs = {
                    id: val.id,
                    shelf_code: val.shelf_code,
                    shelfHeight:val.shelfHeight,
                    remark: val.remark
                }
            },
            //保存层信息
            saveShelf() {
                this.shelfs.id ? this.updateLayer() : this.addLayerSave()
            },
            updateLayer() {
                this.$ajax("put", "/api/shelfs/row/" + this.shelfs.id, {
                    shelf_code: this.shelfs.shelf_code,
                    remark: this.shelfs.remark,
                    shelfHeight:this.shelfs.shelfHeight
                }, data => {
                    if (data.code == 200) {
                        this.getDetail()
                        this.showShelfs = false
                        this.shelfs = {
                            id: "",
                            shelf_code: "",
                            remark: ""
                        }
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            addLayerSave() {
                this.$ajax("post", "/api/shelfs/row", {
                    shelf_id: this.form.id,
                    shelf_code: this.shelfs.shelf_code,
                    remark: this.shelfs.remark,
                    shelfHeight:this.shelfs.shelfHeight
                }, data => {
                    if (data.code == 200) {
                        this.getDetail()
                        this.showShelfs = false
                        this.shelfs = {
                            id: "",
                            shelf_code: "",
                            shelfHeight:"",
                            remark: ""
                        }
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            moveTo(id) {
                this.$ajax("get", "/api/shelfs/moveDown/" + id, {}, data => {
                    if (data.code == 200) {
                        this.getDetail()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },

            //添加列
            addColumn(el) {
                this.columns = {
                    row_id: el.id,
                    id: "",
                    shelf_code: "",
                    remark: ''
                }
                if (el.columns.length == 0) {
                    this.columns.shelf_code = el.shelf_code + "-1"
                } else {
                    this.columns.shelf_code = el.shelf_code + "-" + (el.columns.length + 1)
                }
                // this.showColumns = true
                // this.column_title = "列信息"
                this.addCol()
            },
            showColumn(layer, column) {
                this.showColumns = true
                this.column_title = column.shelf_code + " 列信息"
                this.columns = {
                    row_id: layer.id,
                    id: column.id,
                    shelf_code: column.shelf_code,
                    remark: column.remark
                }
            },
            //保存列信息
            saveColumn() {
                this.columns.id ? this.updateColumn() : this.addCol()
            },
            updateColumn() {
                this.$ajax("put", "/api/shelfs/column/" + this.columns.id, {
                    shelf_code: this.columns.shelf_code,
                    remark: this.columns.remark
                }, data => {
                    if (data.code == 200) {
                        this.getDetail()
                        this.showColumns = false
                        this.columns = {
                            row_id: '',
                            id: "",
                            shelf_code: "",
                            remark: ''
                        }
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            addCol() {
                this.$ajax("post", "/api/shelfs/column", {
                    row_id: this.columns.row_id,
                    shelf_code: this.columns.shelf_code,
                    remark: this.columns.remark
                }, data => {
                    if (data.code == 200) {
                        this.getDetail()
                        this.showColumns = false
                        this.columns = {
                            row_id: '',
                            id: "",
                            shelf_code: "",
                            remark: ''
                        }
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            //添加商品到列
            saveProduct() {
                // this.products.product_price === '' ? this.products.product_price = 0 : ""
                this.products.product_num === '' ? this.products.product_num = 0 : ""
                this.$ajax("post", "/api/shelfs/product", {
                    shelf_id: this.products.id,
                    product_id: this.products.product_id,
                    // product_price: this.products.product_price,
                    product_num: this.products.product_num
                }, data => {
                    if (data.code == 200) {
                        this.getDetail()
                        this.showProducts = false
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            deleteLayer(id) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$ajax(
                            "delete", "/api/shelfs/row/" + id, {},
                            data => {
                                // this.showShelfs = false
                                this.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                this.getDetail()
                            }
                        );
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        })
                    })
            },
            deleteColumn(id) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$ajax(
                            "delete", "/api/shelfs/column/" + id, {},
                            data => {
                                // this.showColumns = false
                                this.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                this.getDetail()
                            }
                        );
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        })
                    })
            },
            closeBox() {
                this.$parent.$parent.$parent.show = false
                this.$parent.$parent.$parent.getData()
            },
            clearData() {
                this.shelfs = {
                    id: "",
                    shelf_code: "",
                    shelfHeight:"",
                    remark: ""
                }
                this.columns = {
                    row_id: '',
                    id: "",
                    shelf_code: "",
                    remark: ''
                }
                this.products = {
                    column_id: "",
                    product_id: '',
                    product_name: '',
                    product_num: '',
                    // product_price: '',
                    shelf_code: ''
                }
            }
        }
    }
</script>
<style scoped>
    .sideBox {
        padding: 20px;
        overflow: auto;
    }

    .counterBox {
        width: 100%;
        min-height: 100px;

    }

    .counterName {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .counterLayer {
        width: 100%;
        overflow: visible;
        white-space: nowrap;
        /* vertical-align: top; */
    }

    .counterLayerName {
        display: inline-block;
        width: 120px;
        height: 120px;
        vertical-align: top;
        border: 1px dashed #ccc;
        border-right: none;

    }

    .counterCellBox {
        display: inline-block;
        width: calc(100% - 122px);
        height: 120px;
        overflow: visible;

    }

    .counterCell {
        vertical-align: top;
        width: 120px;
        display: inline-block;
        /* flex-grow: 1; */
        height: 120px;
        border: 1px solid #ccc;
        border-right: none;

    }

    .counterCell:last-child {
        border-right: 1px solid #ccc;
    }

    .layerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 30px 0 10px 0;
        text-align: center;
        cursor: pointer;
    }

    .cellFirst {
        width: 150px;
        height: 150px;
        /* background-color: #fff; */
        border: 1px dashed #ccc;
        position: relative;
        vertical-align: top;
    }

    .cellSecond {
        width: 150px;
        height: 150px;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
        cursor: pointer;
        /* vertical-align: bottom; */
        position: relative;
    }

    .cellList {
        padding-top: 5px;
        font-size: 14px;
    }

    .columnName {
        color: #888;
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .productName {
        font-size: 16px;
        font-weight: 600;
        height: 40px;
        margin: 40px 0 6px 0;
        text-align: center;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .productInfo {
        text-align: right;
        color: #888;
        vertical-align: bottom;
    }

    .weightColor {
        font-size: 16px;
        color: #333;
    }

    .textBtn {
        /* display: block; */
        padding: 0 12px;
        min-height: 20px;
        margin: 0;
    }

    .dialog-footer {
        padding-left: 100px;
    }

    .noPro {
        background-color: #f0f0f0;
    }

    .deleteCell {
        color: #f64126;
        position: absolute;
        bottom: 10px;
        left: 0px;
    }

    .deleteRow,.redColor {
        color: #f64126;
    }
</style>
<style>
    .shelfBox .el-dialog__header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .shelfBox .el-dialog__body {
        padding-right: 50px;
    }

    .shelfBox .el-form-item {
        margin-bottom: 15px;
    }

    .shelfBox .el-input__inner {
        padding-right: 0;
    }
</style>